<template>
  <a-modal
    :title="'脱敏配置'"
    :visible="visible"
    width="660px"
    centered
    ok-text="确认"
    :z-index="1000"
    :destroy-on-close="true"
    cancel-text="取消"
    :keyboard="true"
    :mask-closable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="desensitization-content">
      <div v-if="Object.keys(fieldList).length > 0" class="alert-warning">
        <a-icon-font class="icon" type="iconweiwanpeizhi" />
        设置脱敏的字段在导入时默认会转成字符串类型
      </div>
      <a-tabs v-if="Object.keys(fieldList).length > 0" type="card" size="small">
        <a-tab-pane
          v-for="(table, key, index) in fieldList"
          :key="index"
          :tab="key"
          class="tab-content"
        >
          <div class="desensitization-header">
            <span class="content-column column-field">字段(列)名称</span>
            <span class="content-column import-or-not">是否导入</span>
            <span class="content-column column-boolean">脱敏</span>
            <span class="content-column column-type">
              <span>脱敏类型</span>
              <a-tooltip placement="top">
                <template slot="title">
                  <span
                    >标注敏感字段的类型，以便于我们更好的保护您的数据安全
                    !</span
                  >
                </template>
                <a-icon-font type="iconbangzhu" />
              </a-tooltip>
            </span>
            <span class="content-column column-way">脱敏方式</span>
          </div>
          <!-- 要导入的字段 -->
          <div class="desensitization-inner scroll-bar">
            <div
              v-for="(column, key1, index1) in table"
              :key="index1"
              class="field-item"
            >
              <!-- 字段名称  -->
              <div class="content-column column-field">
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>{{ key1 }}</span>
                  </template>
                  <span class="field-name">{{ key1 }}</span>
                </a-tooltip>
              </div>
              <!-- 是否导入  -->
              <span class="content-column import-or-not">
                <a-switch v-model="column.importColumn" size="small" />
              </span>
              <!-- 脱敏开关  -->
              <span class="content-column column-boolean">
                <a-switch
                  v-model="column.masking"
                  :disabled="!column.importColumn"
                  size="small"
                />
              </span>
              <!-- 脱敏类型  -->
              <span class="content-column column-type">
                <a-select
                  v-model="column.dataLevelId"
                  placeholder="请选择"
                  size="small"
                  style="width: 120px;"
                  :disabled="!column.masking || !column.importColumn"
                >
                  <a-select-option
                    v-for="(item, index2) in listDataLevel"
                    :key="index2"
                    :value="item.id"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </span>
              <!-- 脱敏方式  -->
              <span class="content-column column-way">
                <a-select
                  v-model="column.dataMaskingType"
                  placeholder="请选择"
                  size="small"
                  style="width: 120px;"
                  :disabled="!column.masking || !column.importColumn"
                >
                  <a-select-option
                    v-for="(mask, index3) in listMaskingType"
                    :key="index3"
                    :value="mask.maskingType"
                    >{{ mask.maskingTypeName }}</a-select-option
                  >
                </a-select>
              </span>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
      <div v-else class="empty-info">
        <img alt="" src="@/assets/view/dataview-empty.svg" />
        <p>
          暂未发现有效导入字段 (列) ! <br />
          请在 " <strong> 导入数据</strong> " 根据数据类型导入数据
        </p>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { Prop, Watch, Component, Vue, Emit } from 'vue-property-decorator'
import DataStore from '@/store/modules/data'
import { cloneDeep } from 'lodash'

@Component({
  components: {},
})
export default class EditOperator extends Vue {
  @Prop() visible!: boolean // 弹窗显示
  @Prop({ type: Array, default: [] }) datasetData!: any[] // 导入数据的全部列
  @Prop({ type: Object, default: () => ({}) }) haveSetDesensitization!: any // 导入数据的全部列
  private fieldList: any = {}

  // 监听弹出 渲染编辑器
  @Watch('visible')
  private _onOpenEditOperator(visible: boolean) {
    if (visible) {
      this.setColumnDesensitization()
    }
  }

  public setColumnDesensitization() {
    if (Object.keys(this.haveSetDesensitization).length > 0) {
      this.fieldList = cloneDeep(this.haveSetDesensitization)
    }
  }

  // 脱敏类型
  public get listDataLevel() {
    return DataStore.getListDataLevel
  }

  // 脱敏方式
  public get listMaskingType() {
    return DataStore.getListMaskingType
  }

  @Emit('confirm')
  public handleOk() {
    return this.fieldList
  }

  /**
   * 关闭弹框
   */
  @Emit('close-pop')
  public handleCancel() {
    return false
  }
}
</script>

<style lang="less" scoped>
.desensitization-content {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  height: 300px;

  /deep/ .ant-tabs-card-bar {
    margin-bottom: 0;
  }

  /* 头 */

  .desensitization-header {
    font-weight: 600;
    /*padding-bottom: 12px;*/
    width: 100%;
  }

  /* 内容 */

  .desensitization-inner {
    height: 220px;
    width: 100%;

    .field-item {
      align-items: center;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      height: 40px;
      width: 100%;
    }
  }

  /* 为空 */

  .empty-info {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    text-align: center;
  }

  .alert-warning {
    background-color: #fffbe6;
    margin-bottom: 8px;
    margin-top: -14px;
    padding: 8px 24px;

    .icon {
      margin-right: 5px;
    }
  }
}

.content-column {
  display: inline-block;
  height: 40px;
  line-height: 40px;
}

/* table header body 字段名称宽度 */
.column-field {
  width: 150px;

  .field-name {
    display: inline-block;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.import-or-not {
  width: 80px;
}

/* table header body 脱敏开关名称宽度 */
.column-boolean {
  width: 80px;
}

/* table header body 脱敏类型宽度 */
.column-type {
  width: 150px;
}

/* table header body 脱敏方式宽度 */
.column-way {
  width: 150px;
}

.scroll-bar {
  overflow-y: auto;

  /* 滚动条 */

  &::-webkit-scrollbar {
    height: 10px;
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #333;
  }

  &::-webkit-scrollbar-corner {
    background: #179a16;
  }
}
</style>
